<template>
  <div class="edit_menu">
    <Form ref="Menus" :model="menuData" :rules="MenuRule" :label-width="80">
      <FormItem label="上级" prop="parent_name">
        <Input type="text" v-model="menuData.parent_name" disabled></Input>
      </FormItem>
      <FormItem label="名称" prop="name">
        <Input type="text" v-model="menuData.name"></Input>
      </FormItem>
      <FormItem label="链接" prop="url">
        <Input type="text" v-model="menuData.url" v-if="menuData.pId == 0" disabled></Input>
        <Input type="text" v-model="menuData.url" v-if="menuData.pId > 0"></Input>
      </FormItem>
      <FormItem label="序号" prop="MENU_ORDER">
        <InputNumber :min="1" v-model="menuData.MENU_ORDER"></InputNumber>
      </FormItem>
      <FormItem label="类型" prop="MENU_TYPE" v-show="menuData.pId == 0">
        <RadioGroup v-model="menuData.MENU_TYPE">
          <Radio label="1">系统菜单</Radio>
          <Radio label="2">业务菜单</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="状态" prop="MENU_STATE">
        <RadioGroup v-model="menuData.MENU_STATE">
          <Radio label="1">显示</Radio>
          <Radio label="0">隐藏</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="PATH" prop="PATH">
        <Input type="text" v-model="menuData.PATH"></Input>
      </FormItem>
      <FormItem label="TITLE" prop="TITLE">
        <Input type="text" v-model="menuData.TITLE"></Input>
      </FormItem>
      <FormItem label="NAME" prop="NAME">
        <Input type="text" v-model="menuData.NAME"></Input>
      </FormItem>
      <FormItem label="COMPONENT" prop="COMPONENT">
        <Input type="text" v-model="menuData.COMPONENT"></Input>
      </FormItem>
      <FormItem label="ICON" prop="ICON">
        <Input type="text" v-model="menuData.ICON"></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('Menus')">确定</Button>
        <Button type="error" @click="cancelEdit">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
// import Util from '@/libs/util'

export default {
  data () {
    return {
      MenuRule: {
        name: [
          {
            required: true,
            message: '名称不可为空',
            trigger: 'blur'
          }
        ],
        PATH: [
          {
            required: true,
            message: 'PATH不可为空',
            trigger: 'blur'
          }
        ],
        TITLE: [
          {
            required: true,
            message: 'TITLE不可为空',
            trigger: 'blur'
          }
        ],
        NAME: [
          {
            required: true,
            message: 'NAME不可为空',
            trigger: 'blur'
          }
        ],
        COMPONENT: [
          {
            required: true,
            message: 'COMPONENT不可为空',
            trigger: 'blur'
          }
        ],
        ICON: [
          {
            required: true,
            message: 'ICON不可为空',
            trigger: 'blur'
          }
        ],
        MENU_ORDER: [
          {
            type: 'number',
            message: 'MENU_ORDER 必须是数字',
            trigger: 'change'
          }
        ]
      }
    }
  },
  props: {
    Menu: Object
  },
  computed: {
    menuData: function () {
      let menu_data = this.Menu
      menu_data.MENU_ORDER = Number(menu_data.MENU_ORDER) || 0
      return menu_data
    }
  },
  methods: {
    cancelEdit: function () {
      this.handleReset('Menus')
      this.$emit('close', this.Menu)
    },
    handleSubmit: function (name) {
      this.$refs[name].validate(valid => {
        let menu = this.Menu
        if (valid) {
          if (menu.id) {
            this.edit(menu)
          } else {
            this.add(menu)
          }
          this.handleReset(name)
        }
      })
    },
    handleReset: function (name) {
      this.$refs[name].resetFields()
    },
    edit: function (menu) {
      let $this = this
      // 编辑菜单
      let data = {
        MENU_ID: menu.id || '1',
        MENU_NAME: menu.name || '1',
        MENU_URL: menu.url || '1',
        PARENT_ID: menu.pId || '1',
        MENU_TYPE: menu.MENU_TYPE || '1',
        MENU_ORDER: parseInt(menu.MENU_ORDER) || 1,
        MENU_STATE: menu.MENU_STATE || '1',
        COMPONENT: menu.COMPONENT || '1',
        PATH: menu.PATH || '1',
        TITLE: menu.TITLE || '1',
        NAME: menu.name || '1',
        ICON: menu.ICON || '1'
      }

      this.$store.dispatch('handleEditMenu', data).then(res => {
        if (res && res.data && res.data.success === true) {
          // console.log(res, data)
          this.$Message.success({
            content: '成功',
            onClose: () => {
              $this.$emit('refreshData')
            }
          })
        } else {
          this.$Message.error('失败!')
        }
      })
        .catch(err => {
          console.log(err)
        })
    },
    add: function (menu) {
      let $this = this
      // 添加菜单
      let data = {
        MENU_TYPE: menu.MENU_TYPE || '1',
        MENU_ORDER: parseInt(menu.MENU_ORDER) || 1,
        MENU_URL: menu.url || '1',
        MENU_STATE: menu.MENU_STATE || '1',
        MENU_NAME: menu.name || '1',
        PARENT_ID: menu.pId,
        COMPONENT: menu.COMPONENT || '1',
        PATH: menu.PATH || '1',
        TITLE: menu.TITLE || '1',
        NAME: menu.name || '1',
        ICON: menu.ICON || '1',
        MENU_ICON: menu.ICON
      }
      this.$store.dispatch('handleAddMenu', data).then(response => {
        if (response && response.data && response.data.success === true) {
          this.$Message.success({
            content: '成功',
            duration: 1.5,
            onClose: () => {
              $this.$emit('refreshData')
            }
          })
        } else {
          this.$Message.error('失败!')
        }
      })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style></style>
